<template>
  <div style="width:100%; height: 100% ">
    <div style="height: 100%;position: relative;overflow-y: scroll;overflow-x:hidden" id="scrollOuter"
         ref="scrollOuter">
      <div class="transition-group" @touchstart="loadPosition" @touchend="changeEnd" @touchmove.prevent="changeMove"
           style=" width: 100%;height: 100%;">
        <transition :name="className" tag="div" style="position: relative">
          <div style="position: absolute;top:0; width: 100%; "
               v-for="(list,faindex) in lengths"
               :key="faindex"
               v-if="faindex == activeIndex ">
            <slot>

            </slot>
          </div>
        </transition>

      </div>
    </div>
    <button-to-top v-if="elements" :elements="elements"></button-to-top>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import ButtonToTop from "../ButtonToTop"
  import {mapMutations} from "vuex";
  export default {
    data() {
      return {
        className: 'goleft',
        elements: null,
        timeList: [],
        top: 0,
        newVal: 0,
        oldVal: 0,
      }
    },

    props: {
      lengths: {
        type: Number,
        default: 1
      }
    },
    components: {
      ButtonToTop
    },
    beforeCreate () {
      this.$store.commit('xxy/setstoptouch', true)
    },
    mounted() {
      var returnPos = this.$store.state.cjy.returnPos
      this.elements = this.$refs.scrollOuter
      var i = 0
      var time = 100
      var setScrollTop = () => {

        setTimeout(() => {
          if (this.elements.scrollHeight > returnPos) {
            this.elements.scrollTop = returnPos
            return
          } else if (i * time > 3000) {
            return
          }
          i++
          console.log('this.$store.state.cjy.returnPos', this.$store.state.cjy.returnPos)
          setScrollTop()
        }, time)
      }
      setScrollTop()
      this.gethomescrollTop()
    },

    methods: {
      ...mapMutations('xxy', [
        "sethomehid"
      ]),
      gethomescrollTop() {
        var node = document.getElementById("scrollOuter")
        node.addEventListener('scroll', () => {
          this.top = node.scrollTop
          if (this.top == 0) {
            this.sethomehid(true)
          }
        }, false);
      },
      homeheadshow(newdata, olddata) {
        if (parseInt(newdata) - parseInt(olddata) < -6) {
          this.sethomehid(true)
        } else if (parseInt(newdata) - parseInt(olddata) > 6) {
          this.sethomehid(false)
        }
      },
      //记录位置手指放下的位置
      loadPosition (e)  {
        this.startX = e.changedTouches[0].clientX
        this.startY = e.changedTouches[0].clientY
        this.oldX = this.startX
        this.oldY = this.startY
      },
      //记录位置手指放下的位置
      loadPosition (e)  {
        if (this.setTimeOut) {
          clearTimeout(this.setTimeOut)
        }
        this.tiemList = []
        this.startX = e.changedTouches[0].clientX
        this.startY = e.changedTouches[0].clientY
        this.oldX = this.startX
        this.oldY = this.startY
        this.startTime = new Date()

        this.endTime = this.startTime
      },

      //手指移动
      changeMove (e)  {

        var newX = e.changedTouches[0].clientX
        var newY = e.changedTouches[0].clientY
        var moveX = newX - this.oldX
        var moveY = newY - this.oldY
        this.timeList.unshift({time: new Date().getTime(), move: moveY})
        this.timeList.length > 5 && this.timeList.pop()
        if (Math.abs(moveY) / Math.abs(moveX) > 1) {
          this.$refs.scrollOuter.scrollTop = this.$refs.scrollOuter.scrollTop - moveY
        }
        this.oldX = newX
        this.oldY = newY
      },
      //改变Activeindex
      changeEnd (e) {
        var isStoptouch = this.$store.state.xxy.stoptouch
        var endX = e.changedTouches[0].clientX
        var endY = e.changedTouches[0].clientY
        var X = endX - this.startX;
        var Y = endY - this.startY;
        if (Math.abs(X) > Math.abs(Y) && Math.abs(X) > 100 && this.startX > 50 && isStoptouch) {

          if (X > 0) {
            var index = Math.max(0, this.activeIndex - 1)
          } else {
            var index = Math.min(this.lengths - 1, this.activeIndex + 1)
          }
          this.$store.dispatch('cjy/changeClassifyIndex', index1)
          var ggactive = this.$store.state.cjy.classifyIndex
        }

        this.$store.commit('xxy/setstoptouch', true)

        if (this.timeList.length < 3) {
          this.timeList = []
          return
        }

        var startTime = this.timeList[0].time
        var v = (this.timeList[0].move + this.timeList[0].move) / (this.timeList[0].time - this.timeList[1].time) / 4
        this.timeList = []
        var contentY = this.$refs.scrollOuter.scrollTop
        this.endMove(v, startTime - 1, contentY)
        this.homeheadshow(this.newVal, this.oldVal)
      },

      //入缓动机制
      endMove (v, startTime, contentY) {
        /*console.log('----------',v)*/
        var dir = v > 0 ? 1 : -1; //加速度方向
        v = dir * Math.min(2, Math.abs(v))
        var deceleration = dir * 0.0015;
        var duration = v / deceleration; // 速度消减至0所需时间
        var dist = v * duration / 2; //最终移动多少
        var that = this

        function inertiaMove() {
          that.scrollTop = that.$refs.scrollOuter.scrollTop
          var nowTime = new Date().getTime();
          var t = nowTime - startTime;
          var nowV = v - t * deceleration;
          // 速度方向变化表示速度达到0了
          if (dir * nowV < 0) {
            return;
          }
          var moveY = (v + nowV) / 2 * t;
          var content = (contentY - moveY);

          that.$refs.scrollOuter.scrollTop = content
          if (that.$refs.scrollOuter.scrollTop == that.scrollTop) {
            return
          }
          that.setTimeOut = setTimeout(inertiaMove, 2);
        }

        inertiaMove()
      },




    },
    watch: {
      top(newdata, olddata) {
        this.newVal = newdata
        this.oldVal = olddata
      },
      activeIndex(newData, oldData) {
        if (newData - oldData > 0) {
          this.className = "goleft"
        } else {
          this.className = "goright"
        }
        console.log('ggg', this.className)

      }
    },
    computed: {
      activeIndex() {
        return this.$store.state.cjy.classifyIndex
      }
    }
  }
</script>

<style scoped>
  .goleft-enter-active,
  .goleft-leave-active,
  .goright-enter-active,
  .goright-leave-active {
    transition: all 0.5s;
  }

  .goleft-enter,
  .goright-leave-to {
    transform: translatex(100%);
    opacity: 0.8
  }

  .goleft-leave-to,
  .goright-enter {
    transform: translatex(-100%);
    opacity: 0.8
  }
</style>
